<!-- zhengYu -->

<script setup lang="ts">
import {ref, onMounted} from "vue";
import {
  getAllTeamAndDoctor,
  getDocTeamAndDoctor,
  getAllTeamAndDoctorByName
} from "@/api/contractHomepage/docContractHome";
import TeamDetail from "@/components/MyComponents/TeamDetail.vue";  // 引入卡片详情组件
import Banner from "@/components/MyComponents/Banner.vue";  // 引入导航栏组件

// -----------------------------
// 响应式数据定义
// -----------------------------
const teamList = ref([]);    // 团队列表
const total = ref(0);        // 总条数
const currentCategory = ref('全部团队');

// 分类导航
const categories = ['全部团队', '心血管', '内科', '外科'];

// 分页参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  category: ''
});

// -----------------------------
// 弹窗 & 当前详情
// -----------------------------
const dialogVisible = ref(false);
const currentTeamDetail = ref<any>(null);

// -----------------------------
// 生命周期：挂载加载数据
// -----------------------------
onMounted(() => {
  loadData();
  // 获取URL参数中的teamId并自动打开详情弹窗（推荐的团队）
  const urlParams = new URLSearchParams(window.location.search);
  const teamId = urlParams.get('teamId');
  if (teamId) {
    // 延迟执行以确保数据加载完成
    setTimeout(() => {
      openCardDetail(parseInt(teamId));
    }, 500);
  }
});

// -----------------------------
// 加载团队列表
// -----------------------------
async function loadData() {
  try {
    const response = await getAllTeamAndDoctor(queryParams.value);
    console.log("接口返回的数据:", response); // 打印数据查看
    teamList.value = response.rows;
    total.value = response.total;
  } catch (error) {
    console.error("接口调用失败:", error);
  }
}

// -----------------------------
// 分类切换
// -----------------------------
function handleCategoryChange(category: string) {
  currentCategory.value = category;
  queryParams.value.category = category === '全部团队' ? '' : category;
  queryParams.value.pageNum = 1;
  loadData();
}

// -----------------------------
// 分页
// -----------------------------
function handlePageChange(newPage: number) {
  queryParams.value.pageNum = newPage;
  loadData();
}

function handleSizeChange(newSize: number) {
  queryParams.value.pageSize = newSize;
  queryParams.value.pageNum = 1;
  loadData();
}

// -----------------------------
// 打开详情
// -----------------------------
const openCardDetail = async (teamId: number) => {
  try {
    const res = await getDocTeamAndDoctor(teamId);
    if (res.code === 200) {
      currentTeamDetail.value = res.data;
      dialogVisible.value = true;
    }
  } catch (e) {
    console.error("获取团队详情失败", e);
  }
};

// -----------------------------
// 模糊查询
// -----------------------------
const handleBannerSearch = async (keyword: string) => {
  try {
    if (!keyword) {
      loadData();
      return;
    }

    const response = await getAllTeamAndDoctorByName({teamName: keyword});
    console.log('模糊搜索的结果:', response);
    teamList.value = response.rows || [];
    total.value = response.total || 0;
    queryParams.value.pageNum = 1;
  } catch (error) {
    console.error("搜索失败", error);
  }
};

// 设置导航标题（传递）
const bannerTitle = ref('签约首页');

</script>

<template>
  <div class="page-container">
    <!-- 顶部导航栏（Banner）监听 search 事件，传递动态标题 -->
    <Banner :title="bannerTitle" @search="handleBannerSearch"/>

    <!-- 顶部导航 + 分页 -->
    <div class="top-bar">
      <div class="nav-bar">
        <span
            v-for="category in categories"
            :key="category"
            :class="['nav-item', { active: currentCategory === category }]"
            @click="handleCategoryChange(category)"
        >
          {{ category }}
        </span>
      </div>

      <el-pagination
          background
          layout="prev, pager, next, sizes"
          :total="total"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 15, 20, 25]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
      />
    </div>

    <!-- 团队卡片 -->
    <div class="team-container">
      <div v-for="team in teamList" :key="team.teamId" class="team-card" @click="openCardDetail(team.teamId)">
        <img :src="$urlImage + team.teamImg" alt="团队封面" class="team-cover"/>

        <div class="team-info">
          <h3>{{ team.teamName }}</h3>
          <p>{{ team.teamInfo }}</p>
          <p>已签约人数：{{ team.signedNumber }}</p>

          <!-- 团队人数 + 团队价格（保持你提供的版式） -->
          <div class="team-meta">
            <div class="meta-item">
              <span class="team-members">团队人数：{{ team.doctorVoList?.length || 0 }}</span>
            </div>
            <div class="meta-item">
              <span class="team-price">团队价格 / 年：￥{{ team.teamPrice }}</span>
            </div>
          </div>
        </div>

        <!-- 医生列表（保留注释） -->
        <!--
        <div class="doctor-list" v-if="team.doctorVoList?.length">
          <div v-for="doctor in team.doctorVoList" :key="doctor.doctorId" class="doctor-card">
            <img :src="$urlImage + doctor.avatar" alt="医生头像" class="doctor-avatar"/>
            <div class="doctor-info">
              <p>{{ doctor.doctorName }}</p>
              <p>{{ doctor.department }}</p>
            </div>
          </div>
        </div>
        <div v-else class="no-doctor">暂无医生</div>
        -->
      </div>
    </div>

    <el-dialog
        v-model="dialogVisible"
        title="团队详情"
        width="644px"
        destroy-on-close
    >
      <TeamDetail
          v-if="currentTeamDetail"
          :team="currentTeamDetail"
          @close="dialogVisible = false"
      />
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.page-container {
  padding: 20px;
}

/* 顶部工具条 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.nav-bar {
  display: flex;
  gap: 15px;

  .nav-item {
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f0f0f0;

    &.active {
      background-color: #409eff;
      color: white;
    }

    &:hover {
      background-color: #e0e0e0;
    }
  }
}

/* 团队卡片 */
.team-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 0 10px;
}

.team-card {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-5px);
  }
}

.team-cover {
  width: 100%;
  height: auto;
}

.team-info {
  padding: 10px;

  h3 {
    margin: 0;
    font-size: 18px;
  }

  p {
    margin: 4px 0;
    font-size: 14px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .team-meta {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    font-size: 14px;
    color: #555;

    .meta-item {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      margin-bottom: 8px; /*设置团队人数这一行文字与下面内容的间距为 8px，增加可读性*/
    }

    .team-members {
      color: #409eff;
      font-weight: 500;
    }

    .team-price {
      color: #e94e77;
      font-weight: bold;
    }
  }
}

/* 医生列表 */
.doctor-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  gap: 10px;
}

.doctor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;

  .doctor-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }

  .doctor-info {
    text-align: center;
    font-size: 12px;
    margin-top: 4px;

    p {
      margin: 0;
    }
  }
}

.no-doctor {
  padding: 10px;
  font-size: 12px;
  color: #999;
  text-align: center;
}

@media (max-width: 1200px) {
  .team-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .team-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
